<template>
  <div class="product base-main">
    <div v-if="showDetail">
      <detailComponent @backAction="backAction" />
    </div>
    <div v-else>
      <div class="tip-view">
        <p>首页 / 商品管理 / 产品列表</p>
      </div>
      <!-- 搜索视图 -->
      <div ref="searchv" class="search-view">
        <el-input
          v-model="searchInfo.productName"
          placeholder="请输入产品名称"
        />
        <el-input
          v-model="searchInfo.price"
          placeholder="请输入产品价格"
        />
        <el-select v-model="searchInfo.type" placeholder="请选择产品类型">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="searchInfo.isOpen" placeholder="请选择是否上架">
          <el-option
            v-for="item in saleOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-date-picker
          v-model="searchInfo.creatTime"
          class="search"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="创建时间起"
          end-placeholder="创建时间止"
        />
        <el-button
          class="btnRed"
          type="danger"
          @click="searchAction"
        >查询</el-button>
        <el-button type="warning" @click="addAction">新增+</el-button>
        <el-button type="success">导出</el-button>
        <el-switch
          v-model="openCards"
          style="margin-left: 10px"
          active-text="切换卡片"
          active-color="#f5222d"
        />
      </div>
      <!-- 产品列表 -->
      <div v-if="!openCards" class="list">
        <simpleTable
          :fix-height="true"
          :table-h="tableH"
          header-bg-color="#f5f7fa"
          :is-show-operation="true"
          :table-data="productList"
          :props="props"
        >
          <template #productImg="{ data }">
            <img :src="data.productImg" alt="">
          </template>
          <template #isOpen="{ data }">
            <el-switch v-model="data.isOpen" active-color="#13ce66" />
          </template>
          <template #operation="{ data }">
            <a
              class="linkRed"
              href="javascript:;"
              @click="distributeRecord(data)"
            >删除</a>
            <span style="color: #f0f2f5"> | </span>
            <a href="javascript:;" @click="detailRecord(data)">查看详情</a>
          </template>
        </simpleTable>
      </div>
      <!-- 产品卡片 -->
      <div v-if="openCards" class="cardlist">
        <el-row :gutter="20">
          <el-col
            v-for="item in productList"
            :key="item.productName"
            :xs="24"
            :span="8"
          >
            <el-card
              class="cards"
              shadow="hover"
              :body-style="{ padding: '0px' }"
            >
              <div class="gooditem">
                <div
                  class="imgbg"
                  :style="{ backgroundImage: `url(${item.productImg})` }"
                />
                <div class="bottom">
                  <p class="title">{{ item.productName }}</p>
                  <div class="detail flex">
                    <p>¥ {{ item.price }}</p>
                    <a href="javascript:;">操作按钮</a>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="50"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 新增 -->
    <a-modal
      title="新增产品"
      :visible="dialogFormVisible"
      :confirm-loading="confirmLoading"
      ok-text="确定"
      cancel-text="取消"
      ok-type="danger"
      @ok="onSubmit"
      @cancel="dialogFormVisible = false"
    >
      <el-form :model="form">
        <el-form-item label="产品名称" :label-width="formLabelWidth">
          <el-input
            v-model="form.name"
            style="width: 280px"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="产品价格" :label-width="formLabelWidth">
          <el-input
            v-model="form.price"
            style="width: 280px"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="产品类型" :label-width="formLabelWidth">
          <el-select v-model="form.type" placeholder="请选择产品类型">
            <el-option label="实体类" value="1" />
            <el-option label="服务类" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="上传图片" :label-width="formLabelWidth">
          <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <i slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              >
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in" />
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download" />
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
    </a-modal>
    <!-- 放大缩略图 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
import simpleTable from './../../components/simpleTable'
import detailComponent from './detail'
export default {
  name: 'Product',
  components: {
    simpleTable,
    detailComponent
  },
  data() {
    return {
      showDetail: false,
      tableH: 0,
      openCards: false,
      dialogFormVisible: false,
      confirmLoading: false,
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      currentPage: 1,
      currentDate: new Date(),
      searchInfo: {
        productName: '',
        price: '',
        type: '', // 产品类别
        creatTime: '', // 创建时间
        isOpen: '' // 是否上架
      },
      typeOptions: [
        { label: '电器', value: '1' },
        { label: '美妆', value: '2' },
        { label: '票务', value: '3' },
        { label: '食物', value: '4' },
        { label: '母婴', value: '5' },
        { label: '其他', value: '6' }
      ],
      saleOptions: [
        { label: '是', value: '1' },
        { label: '否', value: '2' }
      ],
      productList: [
        {
          productName: '产品1',
          price: 200,
          type: '电器',
          creatTime: '2020-01-23 23:03:00',
          isOpen: true,
          productImg: 'https://picsum.photos/300/600?random=1'
        },
        {
          productName: '产品2',
          price: 200,
          type: '美妆',
          creatTime: '2020-01-23 23:03:00',
          isOpen: true,
          productImg: 'https://picsum.photos/300/600?random=3'
        },
        {
          productName: '产品3',
          price: 200,
          type: '电器',
          creatTime: '2020-01-23 23:03:00',
          isOpen: true,
          productImg: 'https://picsum.photos/300/600?random=5'
        },
        {
          productName: '产品4',
          price: 200,
          type: '票务',
          creatTime: '2020-01-23 23:03:00',
          isOpen: true,
          productImg: 'https://picsum.photos/300/600?random=2'
        },
        {
          productName: '产品5',
          price: 200,
          type: '食物',
          creatTime: '2020-01-23 23:03:00',
          isOpen: true,
          productImg: 'https://picsum.photos/300/600?random=4'
        },
        {
          productName: '产品6',
          price: 200,
          type: '电器',
          creatTime: '2020-01-23 23:03:00',
          isOpen: true,
          productImg: 'https://picsum.photos/300/600?random=6'
        },
        {
          productName: '产品7',
          price: 200,
          type: '母婴',
          creatTime: '2020-01-23 23:03:00',
          isOpen: true,
          productImg: 'https://picsum.photos/300/600?random=7'
        },
        {
          productName: '产品8',
          price: 200,
          type: '其他',
          creatTime: '2020-01-23 23:03:00',
          isOpen: true,
          productImg: 'https://picsum.photos/300/600?random=8'
        },
        {
          productName: '产品9',
          price: 200,
          type: '电器',
          creatTime: '2020-01-23 23:03:00',
          isOpen: true,
          productImg: 'https://picsum.photos/300/600?random=9'
        },
        {
          productName: '产品10',
          price: 200,
          type: '电器',
          creatTime: '2020-01-23 23:03:00',
          isOpen: true,
          productImg: 'https://picsum.photos/300/600?random=1'
        },
        {
          productName: '产品11',
          price: 200,
          type: '电器',
          creatTime: '2020-01-23 23:03:00',
          isOpen: true,
          productImg: 'https://picsum.photos/300/600?random=2'
        },
        {
          productName: '产品12',
          price: 200,
          type: '电器',
          creatTime: '2020-01-23 23:03:00',
          isOpen: true,
          productImg: 'https://picsum.photos/300/600?random=3'
        }
      ],
      props: [
        {
          prop: 'productName',
          label: '产品名'
        },
        {
          prop: 'productImg',
          label: '缩略图'
        },
        {
          prop: 'price',
          label: '价格',
          sort: true // 是否可以筛选
        },
        {
          prop: 'type',
          label: '产品类型'
        },
        {
          prop: 'creatTime',
          label: '创建时间'
        },
        {
          prop: 'isOpen',
          label: '是否上架'
        }
      ],
      form: {
        name: '',
        price: '',
        type: ''
      },
      formLabelWidth: '120px'
    }
  },
  computed: {},
  watch: {
    '$store.state.setting.refresh': {
      handler: function(newVal, oldVal) {
        if (newVal) {
          alert('刷新产品列表页')
          this.$store.commit('setting/clickRefresh', false)
        }
      }
    }
  },
  created() {},
  mounted() {
    this.caculateHeight()
  },
  methods: {
    backAction() {
      this.showDetail = false
    },
    caculateHeight() {
      this.$nextTick(() => {
        const windowHeight =
          document.documentElement.clientHeight || document.body.clientHeight
        const topHeight =
          64 + 54 + 20 + 56 + 40 + this.$refs.searchv.clientHeight
        const tableH = windowHeight - topHeight - 75
        this.tableH = 300
        console.log(
          '打印搜索模块高度----',
          windowHeight,
          this.$refs.searchv.clientHeight,
          tableH
        )
      })
    },
    handleCurrentChange() {
      console.log('handleCurrentChange---')
    },
    detailRecord() {
      // this.$router.push('/detail')
      this.showDetail = true
    },
    searchAction() {
      console.log('打印查询参数----', this.searchInfo)
    },
    addAction() {
      this.dialogFormVisible = true
    },
    handleRemove(file) {
      console.log(file)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    },
    onSubmit() {
      this.confirmLoading = true
      setTimeout(() => {
        this.confirmLoading = false
        this.dialogFormVisible = false
      }, 500)
      console.log('打印添加确定按钮数据----', this.form)
    }
  }
}
</script>
<style lang="scss" scoped>
.product {
  .cardlist {
    margin: 20px;
    .cards {
      margin-bottom: 20px;
    }
    .gooditem {
      cursor: pointer;
      .imgbg {
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        transition: all 0.4s;
        -moz-transition: all 0.4s;
        -webkit-transition: all 0.4s;
        -o-transition: all 0.4s;
      }
      .imgbg:hover {
        background-size: 110% 110%;
      }
      .bottom {
        padding: 10px;
      }
      .title {
        font-size: 17px;
        margin-bottom: 10px;
      }
      .detail {
        color: red;
      }
    }
    .gooditem img:hover {
      transform: scale(1.2);
    }
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .bg-purple {
    background: #d3dce6;
  }
}
</style>
